<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'
import {
  defaultPagingParams,
  statusOptions,
} from '../index'
import { PAGING } from '@/constant'
// ------------------use------------------
// #region
const emits = defineEmits<{
  search: []
  reset: []
}>()
const query = defineModel<any>({
  default: () => defaultPagingParams,
})
const [defaultOptions, setDefaultOptions] = useState<any[]>(
  [],
)
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region
const options = computed(() => [
  {
    dicCode: 'SHI_JIAN_KE_LI',
    dicKey: '',
    dicValue: '全部',
  },
  ...defaultOptions.value,
])
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getOptions()
})
// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
/** 重置 */
async function reset() {
  query.value = { ...defaultPagingParams }
  await nextTick()
  emits('reset')
}
async function search() {
  Object.assign(query.value, PAGING.PARAMS)
  await nextTick()
  emits('search')
}
async function getOptions() {
  const { data } = await sysDictionaryEncoApi.queryList(
    'SHI_JIAN_KE_LI',
  )
  setDefaultOptions(data)
}
// #endregion
</script>

<template>
  <el-form
    inline
    label-width="50px"
    label-position="left"
    class="flex-incompressible width-fill"
  >
    <el-form-item
      label-width="80px"
      prop="key"
      label="时间类型"
    >
      <ElSelect
        v-model="query.key"
        style="width: 80px"
        class="free"
      >
        <ElOption
          v-for="option in options"
          :key="option.dicValue"
          :label="option.dicValue"
          :value="option.dicKey"
        />
      </ElSelect>
    </el-form-item>
    <el-form-item label="状态">
      <el-select
        v-model="query.state"
        clearable
        class="free"
        style="width: 100px"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="指标编码/名称" label-width="120px">
      <el-input
        v-model="query.name"
        placeholder="请输入关键词查找"
      />
    </el-form-item>
    <el-form-item>
      <SearchButton @click="search" />
      <el-button plain :icon="Delete" @click="reset">
        清空
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
